<template>
  <section class="components-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        .sync简写
      </div>
      <div class="text item">
        <el-button @click="showChild1 = true">组件显示</el-button>

        <p v-if="random" class="mg-t12">0-1随机数：{{ random }}</p>
        <el-button v-if="random" type="danger" @click="random = null" class="mg-t12">随机数重置</el-button>
        <Child1 :show.sync="showChild1" @event-handler="random = $event; random2.value = $event">
          <!-- 插槽prop -->
          <!-- <template v-slot:default="slotProps">
            {{ slotProps.user.firstName }}
          </template> -->
          <!-- 具名插槽缩写 该缩写只能是后面有参数的时候才能用 -->
          <template #default="dft">
            {{ dft.user.firstName }}
          </template>
        </Child1>

        <!-- 独占默认插槽的缩写语法 注意：只要出现多个插槽，就为每个插槽使用完整的基于template的语法 -->
        <Child1 :show.sync="showChild1" v-slot="slotProps" @event-handler="random = $event">
          独占默认插槽：{{ slotProps.user.firstName }}
        </Child1>

        <!-- 解构插槽prop [重命名、定义后备内容] -->
        <Child1 :show.sync="showChild1" v-slot="{ user }" @event-handler="random = $event">
          解构插槽prop：{{ user.firstName }}
        </Child1>
      </div>
    </el-card>

    <el-card class="mg-t12">
      <div slot="header" class="clearfix">
        依赖注入 provide 和 inject
      </div>
      <div class="text item">
        <ForSon></ForSon>
      </div>
    </el-card>

    <el-card class="mg-t12">
      <div slot="header" class="clearfix">
        程序化的事件侦听器
      </div>
      <div class="text item">
        手动侦听一个事件时：listenHandler【用于集使用和清除一体，程序化管理】
        <pre>
          listenHandler () {
            const TIME_DIS = 10
            const timer = setInterval(() => {
              console.log('~hook~')
            }, TIME_DIS * 1000)
            this.$once('hook:beforeDestroy', function () {
              console.log('~clean~hook~')
              clearInterval(timer)
            })
          }
        </pre>
      </div>
    </el-card>
  </section>
</template>
<script>
import Child1 from './childs/child1'
import ForSon from './childs/4son'
export default {
  name: 'Sync',
  components: {
    Child1,
    ForSon
  },
  provide () {
    return {
      getRandom: this.getRandom,
      random: this.random,
      random2: this.random2
    }
  },
  data () {
    return {
      showChild1: false,
      random: '0.5555555555555555',
      random2: {
        value: null
      }
    }
  },
  mounted () {
    this.listenHandler()
  },
  methods: {
    getRandom () {
      return this.random
    },
    listenHandler () {
      const TIME_DIS = 10
      const timer = setInterval(() => {
        console.log('~hook~')
      }, TIME_DIS * 1000)
      this.$once('hook:beforeDestroy', function () {
        console.log('~clean~hook~')
        clearInterval(timer)
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
